<template>
  <div class="sidebar">
    <div class="font-18 main-title">
      <i class="iconfont icon-4-copy"></i>
      <span class="text">菜单</span>
    </div>
    <div class="menu">
      <div class="menu-item" v-for="item in menuList" :key="item">
        <p class="title">{{item.hash.funcname}}</p>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  props: {
    menuList: {
      type: Array,
    },
  },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .sidebar
    display: table-cell
    width: 200px
    background: #F2F2F2
    border-right: 1px solid #ccc
    .main-title
      width: 100%
      height: 44px
      line-height: 44px
      border-bottom: 2px solid #fff
      color: #13227A
      font-size: 0
      .iconfont
        display: inline-block
        margin-right: 15px
        font-size: 20px
        text-indent: 1em
      .text
        display: inline-block
        font-size: 18px
        font-weight: 600
    .menu
      .menu-item
        display: block;
        width: 100%;
        text-indent: 2em
        cursor: pointer
        .title
          height: 48px
          line-height: 48px
          border-bottom: 1px solid #ccc
          padding-left: 10px
          font-size: 16px
          &:hover
            background: #fff
            color: #6699FF
</style>
